<template>
  <div class="p-header justify-center">
    <div class="body">
      <div v-if="!showNav" class="use back" @click="onBack">
        <ArrowLeftOutlined class="icon" />
      </div>
      <div class="logo">
        <img src="@/views/sys/login/assets/img/logo.png" alt="" />
      </div>
      <div class="fill">
        <LayoutBreadcrumb />
      </div>
      <div>
        <UserDropDown />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { LayoutBreadcrumb, UserDropDown } from '@/layouts/default/header/components';
  import { ArrowLeftOutlined } from '@ant-design/icons-vue';
  import { computed } from 'vue';

  import { useRouter, useRoute } from 'vue-router';

  const router = useRouter(),
    route = useRoute();

  const showNav = computed(() => {
    return !!route.meta?.showNav;
  });

  function onBack() {
    router.back();
  }
</script>

<style lang="less" scoped>
  .p-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-width: 1200px;
    height: 50px;
    background: #fff;

    .body {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      column-gap: 16px;

      .back {
        margin-right: 8px;

        .icon {
          color: @primary-color;
          font-size: 20px;
        }
      }

      .logo {
        img {
          width: 228px;
        }
      }
    }
  }
</style>
